<template>
  <a-card :bordered="false">
    <h1>上报数据</h1>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        
        <div class="properties">
          <div v-for="(i, index) in Object.keys(item.properties)" :key="index">{{ i }}：{{ item.properties[i] }}</div>
        </div>
        <div>服务id：{{ item.service_id }}</div>
        <div>上报时间：{{ item.eventTime }}</div>
      </li>
    </ul>
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { getAction } from '@/api/manage'
export default {
  name: 'reportingData',
 
  data() {
    return {
      description: '数据上报',
      list: []
    }
  },
  created() {
    this.dataList()
  },
  methods: {
    dataList() {
      getAction(`/device/property/reportRecord/${this.$route.query.id}`).then(res => {
        if (res.success) {
          this.list = res.result
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';
h1 {
  padding: 20px;
}
ul {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  li {
    list-style: none;
    width: 23%;
    text-align: center;
      border: 2px solid #f4f4f4;

    margin: 10px;
    div {
      margin-top: 10px;
    }
    .properties {
    //   border: 2px solid #f4f4f4;
    }
  }
}
</style>
